<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<style>

    div[id="anv0"]{
            position:fixed ;
            top:0%;
            left:0%;
            right: 0%;
            width:100%;
            height:55px;
            background:linear-gradient(to bottom,rgba(225,225,225,0.9) 0.1%,rgb(0,0,0,0)) ;
            z-index: 999;
        }
    div[id="anv0"]:hover{
        background-color: rgb(255, 255, 255);
    }

    p[id="getusername"]{
        position:fixed;
        top:5px;
        left:1050px;
        font-size: 24px;
        font-family: 楷体;
        font-weight: bold;
        color:black;
        z-index: 9999;
        margin: 0%;
    }

    a[id="exit"]{
        text-decoration: none;
        position:fixed;
        top:30px;
        left:1050px;
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        color:cyan;
        z-index: 9999;
        margin: 0%;
    }
    a[id="goManagerScene"]{
    	text-decoration: none;
        position:fixed;
        top:30px;
        left:1120px;
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        color:cyan;
        z-index: 9999;
        margin: 0%;
    }

    img[id="导航栏logo1"]{
        width:150px;
        height:55px;
        position: fixed;
        left:250px;
        top:0%;
        z-index: 9999;
    }
    img[id="导航栏logo2"]{
        width:50px;
        height:50px;
        position: fixed;
        left:200px;
        top:0;
        z-index: 9999;
    }

    div[id="anv0-1"]{
        width:150px;
        height:60px;
    }

    div[id="anv1"]{
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 500px;
        background-color: black;
        z-index:-1;
    }
        table[id="table1"]{
            position: absolute;
            top:60px;
            left:0px;
            right:0px;
            width:100%;
            height:440px;
        }

        p[id="table1-p1"]{
            font-family: "楷体";
            font-size: 80px;
            color: rgb(255, 255, 255);
            padding: 0%;
            margin: 0%;
        }

        p[id="table1-p2"]{
            font-family: "楷体";
            font-size:30px;
            color: rgb(255, 255, 255);
            padding: 0%;
            margin: 0%;
        }

        p[id="table1-p3"]{
            font-family: "楷体";
            font-size:25px;
            color: rgb(255, 255, 255);
            padding: 0%;
            margin: 0%;
        }
		
		a[id="table1-a4"]:link{color:white;}
        a[id="table1-a4"]{
            text-decoration: none;
            font-family: "楷体";
            font-size:20px;
            color:white;
            padding: 5%;
            margin: 0%;
            width:90px;
            border-radius: 10px;
            background-color:rgba(0, 0, 0, 0.8);
        }
        a[id="table1-a4"]:hover{
            padding: 15px;
            color:black;
            background-color:rgb(255, 255, 255);
        }

    div[id="divforLogo"]{
        position: absolute;
        top:340px;
        left:707px;
    }

    li[id="li1"]{
        position: relative;
        left:110px;
        top:40px;
        list-style: none;
        width:80px;
        line-height: 30px;
        height:30px;
        margin: 10px;
        float: left;
        font-family: "楷体";
        font-size: 18px;
        color:black;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 8px;
        border: 1px solid pink;
    }
    li[id="li1-1"]{
        position: relative;
        left:110px;
        top:40px;
        list-style: none;
        width:80px;
        line-height: 30px;
        height:30px;
        margin: 10px;
        float: left;
        font-family: "楷体";
        font-size: 20px;
        color:rgb(0, 0, 0);
        padding: 10px;
        border-radius: 15px;
        background-color: rgb(247, 181, 181);
        border-radius: 8px;
        border: 1px solid pink;
    }

    li[id="li1"]:hover{
    	font-size:20px;
        padding: 10px;
        border-radius: 15px;
        background-color: rgb(247, 181, 181);
    }
    li[id="li1-1"]:hover{
    	font-size:20px;
        padding: 10px;
        border-radius: 15px;
        background-color: rgb(247, 181, 181);
    }
    
    div[id="anv2"]{
        position: absolute;
        top: 500px;
        left:0%;
        width:100%;
        height: 500px;
        background-color: rgb(255, 255, 255);
        z-index:-1;
    }

        div[id="anv2-1"]{
            position: absolute;
            top:600px;
            left:320px;
            border:2px solid black;
            width:700px;
            height:360px;
        }
        
        div[id="anv2-2"]{
            position: absolute;
            top:640px;
            left:620px;
        }

        p[id="anv2-2-p1"]{
            font-family: "楷体";
            font-size: 55px;
            color:rgb(127, 99, 40);
            padding: 5px;
            margin:0%;
        }

        p[id="anv2-2-p2"]{
            font-family: "楷体";
            font-size: 20px;
            color:rgb(127, 99, 40);
            padding:10px;
        }

        div[id="anv2-3"]{
            position: absolute;
            left:718px;
            top:510px;
        }

        div[id="anv2-4"]{
            position: absolute;
            left:1020px;
            top:590px;
        }

        p[id="anv2-4-p1"]{
            padding: 20px;
            font-size: 20px;
            color:chartreuse;
        }

    div[id="anv3"]{
        position: absolute;
        top: 1000px;
        left:0%;
        width:100%;
        height: 1000px;
        background-color: rgb(97, 100, 255);
        z-index:-1;
    }
        div[id="anv3-1"]{
            position: absolute;
            left:710px;
            top:1030px;
        }

        img[id="anv3-img1"]{
            filter: blur(15px);
        }
        img[id="anv3-img1"]:hover{
           filter:blur(5px);
        }

        img[id="anv3-img2"]{
            position: absolute;
            left:320px;
            top:1200px;
            width:250px;
            height:310px;
            border-radius: 5px;
        }
        div[id="cover1"]{
            position: absolute;
            left:320px;
            top:1200px;
            width:250px;
            height:310px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover1"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img3"]{
            position: absolute;
            left:320px;
            top:1520px;
            width:250px;
            height:310px;
            border-radius: 5px;
        }
        div[id="cover2"]{
            position: absolute;
            left:320px;
            top:1520px;
            width:250px;
            height:310px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover2"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img4"]{
            position: absolute;
            left:580px;
            top:1200px;
            width:400px;
            height:630px;
            border-radius: 5px;
        }
        div[id="cover3"]{
            position: absolute;
            left:580px;
            top:1200px;
            width:400px;
            height:630px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover3"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img5"]{
            position: absolute;
            left:990px;
            top:1200px;
            width:200px;
            height:200px;
            border-radius: 5px;
        }
        div[id="cover4"]{
            position: absolute;
            left:990px;
            top:1200px;
            width:200px;
            height:200px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover4"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img6"]{
            position: absolute;
            left:990px;
            top:1410px;
            width:200px;
            height:200px;
            border-radius: 5px;
        }
        div[id="cover5"]{
            position: absolute;
            left:990px;
            top:1410px;
            width:200px;
            height:200px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover5"]:hover{
            opacity:1 ;
        }
        img[id="anv3-img7"]{
            position: absolute;
            left:990px;
            top:1620px;
            width:200px;
            height:210px;
            border-radius: 5px;
        }
        div[id="cover6"]{
            position: absolute;
            left:990px;
            top:1620px;
            width:200px;
            height:210px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.9);
            opacity: 0;
            color: black;
            z-index: 9999;
        } 
        div[id="cover6"]:hover{
            opacity:1 ;
        }

    div[id="anv4"]{
        position: absolute;
        top:2000px;
        left:0%;
        width:100%;
        height: 90px;
        background-color: rgb(244, 255, 222,0.8);
        z-index:-1;
    }

        div[id="anv4-1"]{
            position: absolute;
            top:2020px;
            left:500px;
            width:600px;
            height: 80px;
        }
    
    a:link{
    	color:black;
    }

</style>

<body>
	
    <div id="anv0"></div>
    <img id="导航栏logo1" src="Imgs/导航栏logo.png" /><img id="导航栏logo2" src="Imgs/uplogo.png" />
    <p id="getusername"><font style="font-size:20px;color:rgb(0, 0, 0);">欢迎您:</font><%=session.getAttribute("username")%></p>
    <a id="exit" href="loadIn.jsp">注销</a><%request.setCharacterEncoding("UTF-8");try{if(String.valueOf(session.getAttribute("identity")).contentEquals("管理员")){out.println("<a id='goManagerScene' href='managerScene.jsp'>返回管理系统</a>");}}catch(Exception e){} %>

    <div id="anv1">

        <img src="Imgs/block1.png" width=100% height=100%/>

    </div>

    <div id="divforLogo">
        <img src="Imgs/logo.png" width="80px" height="90px"/>
    </div>
    
    <table id="table1" border="0" cellspacing="0">

        <tr height="20px">
            <td width="400"></td> <td width="210px"></td> <td width="200px"></td> <td width="200px"></td> <td  width="100px"></td> <td width="400"></td> 
        </tr>
        <tr height="80px">
            <td></td> <td></td> <td></td> <td colspan="2" rowspan="2" valign="top">
                <p id="table1-p1">BI-SHOP</p>
                <p id="table1-p2">BI购物</p>
                <p id="table1-p3">为您的购物提供全新的体验</p>
            </td> <td></td> 
        </tr>
        <tr height="40px">
            <td></td> <td></td> <td></td> <td></td> 
        </tr>
        <tr height="60px">
            <td></td> <td></td> <td></td> <td><a id="table1-a4" href="learnAboutUs.jsp">了解我们</a></td> <td></td> <td></td>
        </tr>
        <tr height="50px">
            <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>
        </tr>
        <tr>
            <td></td> <td colspan="4" align="center">
                <ul>
                    <li id="li1-1"><a href="mainScene.jsp" style="text-decoration: none;padding:15px;">首页</a></li>
                    <li id="li1"><a href="shopCenter.jsp" style="text-decoration: none;">购物中心</a></li>
                    <li id="li1"><a href="personalDetails.jsp" style="text-decoration: none;">个人中心</a></li>
                    <li id="li1"><a href="learnAboutUs.jsp" style="text-decoration: none;">联系我们</a></li>
                </ul>
            </td> <td></td>
        </tr>

    </table>

    <div id="anv2"></div>

    <div id="anv2-1"><img src="Imgs/block2.png"/></div>
    <div id="anv2-2">
        <p id="anv2-2-p1">"BUY IT SHOP"</p>
        <p><hr></p>
        <p id="anv2-2-p2">品牌成立：2022年5月01日</p>
        <p id="anv2-2-p2">致力于为用户提供更好的购物体验</p>
        <p id="anv2-2-p2">主要产品：服装、饰品、礼品</p>
    </div>
    <div id="anv2-3">
        <img src="Imgs/block3.png" width="80px" height="80px"/>
    </div>
    <div id="anv2-4">
        <p id="anv2-4-p1">CONSIDERATION<br>体贴</p>
        <p id="anv2-4-p1">CONCENTRATION<br>专注</p>
        <p id="anv2-4-p1">CONSISTENT<br>坚持</p>
    </div>

    
    <div id="anv3"><img id="anv3-img1" src="Imgs/block4.png" width="100%" height="100%" /></div>
    <div id="anv3-1"><img src="Imgs/block5.png" width="80px" height="80px" /></div>

    <a target="_blank" href="purchase.jsp?product=互扣式双G链条真丝夹克"><img id="anv3-img2" src="shopCenterImgs/female-clothing/4.png" /><div id="cover1"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=平纹针织棉卫衣"><img id="anv3-img3" src="shopCenterImgs/female-clothing/8.png" /><div id="cover2"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=饰马衔扣丹宁面料连衣裙"><img id="anv3-img4" src="shopCenterImgs/female-clothing/5.png" /><div id="cover3"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=水晶“1921”印花卫衣"><img id="anv3-img5" src="shopCenterImgs/man-clothing/6.png" /><div id="cover4"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>        
    <a target="_blank" href="purchase.jsp?product=复古花朵和小马印花棉质保龄球衫"><img id="anv3-img6" src="shopCenterImgs/man-clothing/13.png" /><div id="cover5"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>
    <a target="_blank" href="purchase.jsp?product=Jackie 1961系列小号手袋"><img id="anv3-img7" src="shopCenterImgs/bag/6.png" /><div id="cover6"><br><br><br><br><p align="center" style="font-size:30px;font-family:serif;font-weight: bold;">+<br>M O R E</p></div></a>

    <div id="anv4"><img src="Imgs/block4.png" style="filter:blur(20px)" width="100%" height="100%" /></div>
    <div id="anv4-1">
        <p style="font-size:25px;font-family:楷体;color:rgb(255, 255, 255);margin: 0;">BUY IT SHOP.com</p>
        <hr color="black">
        <p style="font-size:20px;font-family:楷体;color:rgb(255, 255, 255);margin: 0;">李上勤 电子商务系统设计与分析课设项目 2022-5-01</p>
    </div>

    <script>
	
    	
        

    </script>

</body>
</html>